<style>
    * {
        color: #000000;
    }

    h1, h2, h3, h4, h5, h6 {
        color: #000000;
    }

    .company-wrapper {
        max-width: 400px;
        height: 100%;
        margin: auto;
        background-color: white;
        vertical-align: middle;
        position: relative;
        padding: 10px;
        font-size: 12px;
    }

    .image-caption {
        float: left;
        position: relative;
        width: 100%;
    }

    img.com-thumb {
        max-width: 400px;
    }

    .image-caption .caption {
        background-color: rgba(0, 0, 0, 0.7);
        bottom: 5px;
        left: 0;
        padding: 5px 0 5px 5px;;
        position: absolute;
        width: 99%;
        color: white;
    }

    .lbl-name {
        color: #307DFE;
    }

    .lbl-value {
        font-size: 14px;
    }

    .company-wrapper p {
        margin-bottom: 5px;
        border-bottom: 1px solid #d3d3d3;
        padding-bottom: 5px;
    }

    .edit-company {
        position: absolute;
        color: #307DFE;
        cursor: pointer;
        left: 5px;
        top: 5px;
    }

    .edit-company:hover {
        color: #307DFE;
        text-decoration: underline;
    }

</style>

<div class="company-wrapper"
     style="">
    <div class="image-caption">
        <img class="com-thumb" src="<?php echo HSUrl::home() . $model->picture ?>"
             alt="<?php echo $model->name ?>">
        <a class="edit-company" href="<?php echo HSUrl::getEditCompanyUrl($model->id, $model->name) ?>">Chỉnh sửa</a>
        <div class="caption">
            <?php echo $model->name ?>
        </div>
    </div>
    <div style="clear: both"></div>

    <?php if ($model->phone != '') {
        echo " <p>
        <label class='lbl-name'>Số điện thoại</label>
        <label class='lbl-value'>$model->phone</label>
        </p>";
    }?>

    <?php if ($model->owner != '') {
        echo " <p>
        <label class='lbl-name'>Người sở hữu</label>
        <label class='lbl-value'>$model->owner</label>
        </p>";
    }?>

    <?php if ($model->address != '') {
        echo " <p>
        <label class='lbl-name'>Địa chỉ</label>
        <label class='lbl-value'>$model->address</label>
        <label class='lbl-value'>$model->city</label>
        </p>";
    }?>

    <!--    --><?php //if ($model->category != null) {
    //        echo " <p>
    //            <label class='lbl-name'>Danh mục</label><br/>
    //            <label class='lbl-value'>" . $model->category->name_vn . "</label>
    //            </p>";
    //    }
    //
    ?>

    <p style="border: none">
        <label style="float: left" class="lbl-name">Bình luận</label>
        <?php if ($readMore) {
            echo "<label class='read-more' style='float: right'  data-index='1'> Xem thêm </label>";
        }?>
    <div style="clear: both"></div>
    <div class="comment-content-wrapper">
        <?php if (count($comments) == 0) { ?>
            <div> Chưa có bình luận nào</div>
        <?php
        } else {
            foreach ($comments as $comment) {
                ?>
                <div class='comment-each-wrapper'>
                    <div style="font-size: 12px">
                        <span style='font-weight: bold;font-size: 12px'><?php echo $comment['username'] ?></span> -
                        <span><?php echo($comment['created_time']) ?></span>
                    </div>
                    <p><?php echo $comment['content'] ?></p>

                </div>
            <?php
            }
        } ?>

        <div class="comment-wrapper">
            <table>
                <tr>
                    <td>
                        <textarea id="txtContent" rows="4" cols="7" placeholder="Nhập nội dung"/>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a href="#commentBox" class="btn-send-comment  btn btn-default"
                           id="btnSend"> Gửi
                        </a>
                    </td>
                    <input type="hidden" value="<?php echo $model->id ?>" id="hdNewsId"/>
                </tr>
            </table>
        </div>
    </div>

    <div id="commentBox" class="comment-box-wrapper">
        <table>
            <tr>

                <td>
                    <input class="comment-input" type="text" id="txtUsername" placeholder="Tên"/>

                </td>
            </tr>
            <tr>

                <td>
                    <input class="comment-input" type="text" id="txtEmail" placeholder="Email"/>
                </td>
            </tr>

            <tr>
                <td style="text-align: right"><input type="button" id="btnSubmit" class="btn btn-default"
                                                     value="Gửi">
                </td>
                <input type="hidden" id="hdContent">
                <input type="hidden" value="<?php echo $model->id ?>" id="hdNewsId"/>
            </tr>
        </table>
    </div>
    </p>


</div>

<script type="text/javascript">
    var $txtContent = '';
    var mobile = checkMobile();
    if (mobile.any()) {
        $(".company-wrapper").attr('style', 'max-width:90%');
        $('.com-thumb').attr('style', 'max-width:100%');
    }

    var proccessing = false;

    $('.comment-content-wrapper').delegate('.btn-send-comment', 'click', function () {

        if ($("#txtContent").val() == '') {
            alert("Bạn chưa nhập nội dung");
            return false;
        }
        $txtContent = $("#txtContent").val();
        $("a#btnSend").fancybox({
            'hideOnContentClick': true,
            'width': 400
        });

        setTimeout(function () {
            $.magnificPopup.close();
        }, 1000);

    });

    $("#btnSubmit").click(function () {
        if (proccessing)return;
        var $data = { 'username': $("#txtUsername").val(), 'email': $("#txtEmail").val(), 'content': $txtContent, 'company_id': $("#hdNewsId").val()};
        var $content = $txtContent;
        if ($content.trim() == '') {
            return;
        }
        if ($.trim($("#txtUsername").val()) == '') {
            alert("Vui lòng nhập tên");
            return;
        }

        if ($.trim($("#txtEmail").val()) == '') {
            alert("Vui lòng nhập email");
            return;
        }

        proccessing = true;
        HS.Helpers.block($('.fancybox-outer'));

        $.ajax({
            'type': 'POST',
            'data': $data,
            'url': HS.baseUrl + '/ajax/comment',
            'success': function (data) {
                proccessing = false;

                $("#txtUsername").val('');
                $("#txtEmail").val('');
                $("#txtContent").val('');
                $txtContent = '';
                HS.Helpers.unblock();
                $content = "<div>Bình luận của bạn đã được đăng và đang chờ kiểm duyệt. Cảm ơn bạn.</div>";

                var isMobile = checkMobile();
                if (isMobile.any()) {
                    var $width = 300;
                } else {
                    var $width = 400;
                }
                alert("Bình luận của bạn đã được đăng và đang chờ kiểm duyệt. Cảm ơn bạn.");
                $.fancybox.close();
                $.magnificPopup.open({
                    items: {
                        src: data.url
                    },
                    type: 'ajax',
                    overflowY: 'scroll',
                    closeOnContentClick: false,
                    closeOnBgClick: false,
                    showCloseBtn: true
                }, 0);

            }
        });

    });

    $(".read-more").click(function () {
        var $id = $("#hdNewsId").val();
        var $pageIndex = $(this).attr('data-index');

        $.ajax({
            'url': HS.baseUrl + '/ajax/getComments?id=' + $id + '&index=' + $pageIndex,
            'type': 'GET',
            'success': function ($data) {
                if (!$data['readmore']) {
                    $(".read-more").remove();
                }
                var index = $(".read-more").attr('data-index');
                index++;
                $(".read-more").attr('data-index', index);

                var $html = '';
                for (var i = 0; i < $data['comments'].length; i++) {
                    $html += '<div class="comment-each-wrapper">';
                    $html += '<div style="font-size: 12px">' +
                        '<span style="font-weight: bold">' + $data['comments'][i]['username'] + '</span> - <span> ' + $data['comments'][i]['created_time'] + ' </span>';

                    $html += "</div>" +
                        "<p>" + $data['comments'][i]['content'] + "</p>"
                    "</div>";
                }
                $(".comment-content-wrapper").find('.comment-each-wrapper').last().after($html);

            }
        });
    });

</script>